<template>
  <div>
    <div class="breadcrumb">
      <a-button @click="returnBack">返回</a-button>
    </div>
    <div class="pageContent">
      <div class="title">{{conpanyDetail.name}}：</div>
      <div class="content" style="position:relative;">
        <div class="flexBetween">
          <div>承包类型：{{conpanyDetail.type}}</div>
          <div>负责人：{{conpanyDetail.charge}}张三</div>
          <div>负责人电话：{{conpanyDetail.tell}}132912819218</div>
        </div>
        <div class="flexBetween" v-if="!fold">
          <div>状态：{{conpanyDetail.status}}</div>
          <div>施工队数量：{{conpanyDetail.num}}</div>
          <div>在场人数：{{conpanyDetail.peopleNum}}</div>
        </div>
        <div style="position:absolute;right:10px;top:0px">
          <a-icon
            type="down"
            v-if="fold"
            style="margin-right:30px;cursor: pointer"
            @click="fold=!fold"
          />
          <a-icon
            type="up"
            v-if="!fold"
            style="margin-right:30px;cursor: pointer"
            @click="fold=!fold"
          />
        </div>
      </div>
      <!-- 新增施工队 -->
      <div class="addTeam">
        <a-button type="primary" @click="addTeam">新增施工队</a-button>
      </div>

      <div class="addGroup">
        <div class="addGroup_title">
          <div class="flexBetween1">
            <div>
              <span>路基一队 ：</span>
              <span></span>
            </div>
            <div>
              <span>施工队长 ：</span>
              <span class="wordBlue">张三、李四</span>
            </div>
            <div>
              <a-button type="primary" @click="addGroup">新增班组</a-button>
            </div>
          </div>
        </div>
        <div class="addGroup_content">
          <div class="addGroup_content_title">木工班 :</div>
          <div class="flexBetween">
            <div>
              <span>班组长 ：</span>
              <span class="wordBlue">张三</span>
            </div>
            <div>
              <span>在场人数 ：</span>
              <span>32</span>
            </div>
            <div>
              <span>累计人数 ：</span>
              <span>45</span>
            </div>
          </div>
        </div>
        <div class="addGroup_content">
          <div class="addGroup_content_title">钢筋班 :</div>
          <div class="flexBetween">
            <div>
              <span>班组长 ：</span>
              <span class="wordBlue">张三</span>
            </div>
            <div>
              <span>在场人数 ：</span>
              <span>32</span>
            </div>
            <div>
              <span>累计人数 ：</span>
              <span>45</span>
            </div>
          </div>
        </div>
      </div>

      <div class="addGroup">
        <div class="addGroup_title">
          <div class="flexBetween1">
            <div>
              <span>路基二队 ：</span>
              <span></span>
            </div>
            <div>
              <span>施工队长 ：</span>
              <span class="wordBlue">张三、李四</span>
            </div>
            <div>
              <a-button type="primary" @click="addGroup">新增班组</a-button>
            </div>
          </div>
        </div>
        <div class="addGroup_content">
          <div class="addGroup_content_title">木工班 :</div>
          <div class="flexBetween">
            <div>
              <span>班组长 ：</span>
              <span class="wordBlue">张三</span>
            </div>
            <div>
              <span>在场人数 ：</span>
              <span>32</span>
            </div>
            <div>
              <span>累计人数 ：</span>
              <span>45</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 对话框 -->
      <div class="amodla">
        <a-modal
          v-model="visible"
          :title="modalTitle"
          @ok="handleOk"
          :maskClosable="false"
          cancelText="取消"
          okText="确认"
        >
          <a-form-model
            ref="ruleForm"
            :model="formTeam"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
            v-if="modalTitle!='新建班组'"
          >
            <a-form-model-item ref="name" label="施工队名称" prop="name">
              <a-input v-model="formTeam.name" :maxLength="30" />
            </a-form-model-item>

            <a-form-model-item ref="cap" label="施工队长" prop="cap">
              <a-select label-in-value v-model="formTeam.cap" placeholder="请选择">
                <a-select-option v-for="(item,index) in cap " :key="index" :value="item">{{item}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-form-model>

          <a-form-model
            ref="ruleForm"
            :model="formGroup"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
            v-if="modalTitle=='新建班组'"
          >
            <a-form-model-item ref="name" label="班组名称" prop="name">
              <a-input v-model="formGroup.name" :maxLength="30" />
            </a-form-model-item>

            <a-form-model-item ref="cap" label="班组长" prop="cap">
              <a-select label-in-value @change="handlechange" placeholder="请选择">
                <a-select-option v-for="(item,index) in cap " :key="index" :value="item">{{item}}</a-select-option>
              </a-select>
            </a-form-model-item>

            <!-- <a-form-model-item ref="num" label="在场人数" prop="num">
              <a-input v-model="formGroup.num" :maxLength="30" />
            </a-form-model-item>

            <a-form-model-item ref="totalnum" label="累计人数" prop="totalnum">
              <a-input v-model="formGroup.totalnum" :maxLength="30" />
            </a-form-model-item>-->
          </a-form-model>
        </a-modal>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      conpanyDetail: '',
      fold: true,
      visible: false,
      modalTitle: '新建施工队',
      labelCol: { span: 4 },
      wrapperCol: { span:14 },
      cap: ['张三', '李四'],
      formTeam: {},
      formGroup: { name: '' }
    }
  },
  created() {
    // console.log(this.$route.query.data)
    this.conpanyDetail = this.$route.query.data
  },
  methods: {
    returnBack() {
      this.$router.push({ path: '/constructionUnit/participatingUnits' })
    },
    addGroup() {
      this.modalTitle = '新建班组'
      this.visible = true
    },
    addTeam() {
      this.modalTitle = '新建施工队'
      this.visible = true
    },
    handleOk() {
      this.visible = false
    },
    handlechange(val) {
      switch (val.label) {
        case '张三':
          this.formGroup.name = '钢筋班'
          break

        default:
          this.formGroup.name = '木工班'
          break
      }
    }
  }
}
</script>

<style scoped>
/* ::v-deep .ant-breadcrumb > span:last-child a {
  color: rgba(20, 146, 255, 1);
} */
.breadcrumb {
  padding: 5px;
  background: #fff;
  margin-bottom: 20px;
}
.title {
  color: #000;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.content {
  margin-bottom: 20px;
}
.flexBetween {
  align-items: center;
}
.flexBetween div {
  flex: 1;
}
.flexBetween1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.addTeam {
  margin-bottom: 10px;
}
.addGroup {
  border: 1px solid #ccc;
  margin-bottom: 10px;
}
.addGroup_title {
  background: #fafafa;
  padding: 10px 20px;
  border-bottom: 1px solid #ccc;
}
.addGroup_content_title {
  font-size: 16px;
  color: #000;
  font-weight: 600;
  margin-bottom: 10px;
  font-family: 'Courier New', Courier, monospace;
}
.addGroup_content {
  padding: 20px 0;
  margin: 0 20px;
  border-bottom: 1px solid #ccc;
}
.addGroup_content:last-of-type {
  border: none;
}
.wordBlue {
  color: #1890ff;
}
</style>